<template>
    <a-card :bordered="false">
        <a-tabs :active-key="activePackageId" tabPosition="top" @change="handleChangeActivePackageId">
            <a-tab-pane v-for="item in flowType" :key="item.type">
                <template slot="tab">
                    {{ item.name }}
                </template>
                <a-table rowKey="dataId" :loading="dataLoading" :columns="columns" :data-source="flowList" :pagination="false">
                    <template slot="flowFormatPrice" slot-scope="text">
                        ￥{{text}}
                    </template>
                </a-table>
            </a-tab-pane>
        </a-tabs>
    </a-card>
</template>

<script>
import { mapGetters } from 'vuex'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction, deleteAction } from '@/api/manage'
import { numberToChinese } from '@/utils/util'
import moment from 'moment'

export default {
    name: 'PackageTemplate',
    data() {
        return {
            dataLoading: true,
            activePackageId: 1,
            flowType: [
                {
                    type: 1,
                    name: "收款记录"
                },
                {
                    type: 2,
                    name: "退款记录"
                }
            ],
            flowList: [],
            columns: [
                {
                    title: '时间',
                    dataIndex: 'createTime',
                    key: 'createTime',
                    scopedSlots: { customRender: 'createTime' }
                },
                {
                    title: '姓名',
                    dataIndex: 'flowPatientName',
                    key: 'flowPatientName',
                    scopedSlots: { customRender: 'flowPatientName' }
                },
                {
                    title: '手机号',
                    dataIndex: 'flowPatientMobile',
                    key: 'flowPatientMobile',
                    scopedSlots: { customRender: 'flowPatientMobile' }
                },
                {
                    title: '金额',
                    dataIndex: 'flowFormatPrice',
                    key: 'flowFormatPrice',
                    scopedSlots: { customRender: 'flowFormatPrice' }
                },
                {
                    title: '渠道来源',
                    dataIndex: 'flowChannel',
                    key: 'flowChannel',
                    scopedSlots: { customRender: 'flowChannel' }
                },
                {
                    title: '执行人',
                    dataIndex: 'createDoctorName',
                    key: 'createDoctorName',
                    scopedSlots: { customRender: 'createDoctorName' },
                }
            ]
        }
    },
    watch: {
        activePackageId() {
            if (this.activePackageId > 0) {
                console.log('activePackageId', this.activePackageId)

                if (this.activePackageId == 2 ) {
                    this.columns.splice(this.columns.length - 1, 0, {
                        title: '退款原因',
                        dataIndex: 'flowRefundReason',
                        key: 'flowRefundReason',
                        scopedSlots: { customRender: 'flowRefundReason' }
                    });
                } else {
                    this.columns?.splice(this.columns?.findIndex(v => v.key === 'flowRefundReason'), 1)
                }

                this.handleGetPackageServiceList()
            }
        }
    },
    created() {
        this.getInit()
    },
    methods: {
        ...mapGetters(["doctorId", "orgCode"]),
        async getInit() {
            await this.handleGetPackageServiceList()
        },
        handleGetPackageServiceList() {
            this.dataLoading = true
            postAction('/payrefund/page', { flowType: this.activePackageId, doctorId: this.doctorId() || '0', orgCode: this.orgCode() })
                .then(res => {
                    if (res.success) {
                        this.flowList = res.result.records
                    } else {
                        this.$message.warning(res.message)
                    }
                })
                .finally(() => {
                    this.dataLoading = false
                })
        },
        handleChangeActivePackageId(key) {
            this.activePackageId = key
        }
    }
}
</script>

<style lang="less" scoped>
</style>

